<template>
  <div class="index-container">
    <div class="main-header clearfix">
      <el-row>
       <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="4">
          <el-button type="primary"  icon="el-icon-plus" class="sureBtn"  size="medium"  @click="handleAdd" > 新 增 任 务</el-button>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="20">
          <div class="search fr">
            <div>
              <el-input  v-model="selectForm.name"   size="medium"  placeholder="任务名称"></el-input>
            </div>
            <div>
              <el-select v-model="selectForm.type" clearable placeholder="任务类型" filterable size="medium"  style="width: 100%;">
                <el-option
                  v-for="item in typeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </div>
            <div>
              <el-select v-model="selectForm.cost_type" clearable placeholder="收费类型" filterable size="medium"  style="width: 100%;">
                 <el-option
                   v-for="item in dictData.payType"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value">
                 </el-option>
              </el-select>
            </div>
            <div>
              <el-select v-model="selectForm.older_type" clearable placeholder="任务来源" filterable size="medium"  style="width: 100%;">
                <el-option
                  v-for="item in dictData.elderSource"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div>
              <el-select v-model="selectForm.status" clearable placeholder="状态" filterable size="medium"  style="width: 100%;">
               <el-option label="正常" value="1"></el-option>
               <el-option label="停用" value="0"></el-option>
              </el-select>
            </div>
            <el-button size="medium"   type="primary"   icon="el-icon-search"  class="fr"    @click="handleSearch" > 搜索</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="main-content" style="height: calc(100vh - 250px);">
      <main-table
        :columns="tableColumns"
        :data="tableList"
        :loading="loading"
        wrapperHeight="calc(100% - 10px)" height="100%"
      >
     <el-table-column slot="img" fixed="left" label="图标图片" width="150" align="center">
       <template slot-scope="scope">
         <img class="task-list-img" :src="scope.row.icon" alt="">
       </template>
     </el-table-column>
     <el-table-column slot="status" label="状态" align="center">
       <template slot-scope="scope">
         <el-tag class="tag-cursor" v-if="scope.row.status == '1'" type="success">正常</el-tag>
         <el-tag class="tag-cursor" v-else type="danger">停用</el-tag>
       </template>
     </el-table-column>
     <el-table-column slot="is_show" label="大数据界面展示" align="center" width="120">
       <template slot-scope="scope">
         <el-tag class="tag-cursor" v-if="scope.row.is_show == '1'" type="success">展示</el-tag>
         <el-tag class="tag-cursor" v-else type="danger">不展示</el-tag>
       </template>
     </el-table-column>
     <el-table-column slot="yue" label="是否可预约" align="center">
       <template slot-scope="scope">
         <el-tag class="tag-cursor" v-if="scope.row.yue == '1'" type="success">可预约</el-tag>
         <el-tag class="tag-cursor" v-else type="danger">不可预约</el-tag>
       </template>
     </el-table-column>

      <el-table-column slot="action" fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="mini" type="success" @click="edit(scope.row)">编辑/查看</el-button>
          <el-button size="mini" type="danger" @click="cancelOrder(scope.row)">删除</el-button>
        </template>
      </el-table-column>
      </main-table>
    </div>

    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="1100px">
      <task-add @cancle="dialogVisible = false" :data="ruleForm" @load="handleSearch"></task-add>
    </el-dialog>
  </div>
</template>
<script>
  import mainTable from "@/components/main-table/index";
  import taskAdd from './components/task-add'
  import * as APIWangge from "@/api/wangge";
  import * as APITask from '@/api/task'
  import dictData from "@/utils/dictionary";
  import { sourceType, payType } from "@/utils"
  export default {
    name: "doorserve-serve-tasklist",
    components: {
      mainTable,
      taskAdd
    },
    data() {
      return {
        dictData,
        loading: false,
        title: '添加任务',
        dialogVisible: false,
        ruleForm: {},
        currentSelectedData: [],
        pageData: {},
        selectForm: {},
        tableList:[],
        pagination: {
          current: 1,
          size: 15,
          total: 0
        },
        tableColumns: [
          {
            index: true,
            fixed: true
          },
          {
            slot: 'img'
          },
          {
            prop: 'name',
            label: '任务名称',
            fixed: true
          },
          {
            prop: 'type',
            label: '任务类型',
            formatter: this.typeFormatter
          },
          {
            prop: 'older_type',
            label: '任务来源',
            formatter (row, column, cellValue) {
              return sourceType(cellValue)
            }
          },
          {
            prop: 'ci_num',
            label: '每月服务次数',
            width: 110,
            formatter (row, column, cellValue) {
              if (!cellValue) {
                return ''
              }
              return cellValue + '次'
            }
          },
          {
            prop: 'ci_long',
            label: '单次服务时长',
            width: 110,
            formatter (row, column, cellValue) {
              if (!cellValue) {
                return ''
              }
              return cellValue + '小时'
            }
          },
          {
            prop: 'pay_type',
            label: '收费类型',
            formatter (row, column, cellValue) {
              return payType(cellValue)
            }
          },
          {
            prop: 'pay_num',
            label: '收费金额',
            formatter (row, column, cellValue) {
              if (!cellValue) {
                return ''
              }
              return cellValue + '元'
            }
          },
          {
            prop: 'cost_type',
            label: '佣金类型',
            formatter (row, column, cellValue) {
              return payType(cellValue)
            }
          },
          {
            prop: 'cost_num',
            label: '佣金金额',
            formatter (row, column, cellValue) {
              if (!cellValue) {
                return ''
              }
              return cellValue + '元'
            }
          },
          {
            slot: 'status'
          },
          {
            slot: 'is_show'
          },
          {
            slot: 'yue'
          },
          {
            prop: 'msg',
            label: '备注'
          },
          {
            slot: 'action'
          }
        ],
        key: Math.random(),
        typeList:[]
      };
    },
    created() {},
    beforeDestroy() {},
    mounted() {
      this.gettypeList()
      this.fetchTableList();
    },
    methods: {
      // 修改状态
      handleStatus (type, status, row) {
        APITask.taskEdit({ [type]: status, id: row.id }).then((res) => {
          this.fetchTableList()
        })
      },
      gettypeList () {
        APITask.taskTypeList(this.searchForm).then((res) => {
          const { list = [] } = res.data;
          this.typeList = list || []
        })
      },
      typeFormatter (row, column, cellValue) {
        for (let i = 0; i < this.typeList.length; i++) {
          if (this.typeList[i].id === cellValue) {
            return this.typeList[i].name
          }
        }
      },
      handleSearch() {
        this.fetchTableList()
      },
      fetchTableList() {
        this.loading = true;
        let data = this.selectForm;
        if(data.hasOwnProperty('status') && !data.status){
          delete data.status;
        }
        APITask.taskList(data).then((resp) => {
          if (resp.code === 200) {
            // const { list = [], total = 0 } = resp.data;
            this.tableList = resp.data || []
            this.pagination.total = 0;
          }
        }).finally(() => {
          this.loading = false;
        });
      },
      cancel(formName) {
        this.$refs[formName].resetFields();
        this[formName] = {};
        this.dialogVisible = false;
      },
      edit (row) {
        this.title = '编辑任务';
        this.key = Math.random();
        this.dialogVisible = true
        this.ruleForm = { ...row, ...{
          iconurl: row.icon,
          icon: row.icon_id,
          older_type: String(row.older_type),
          pay_type: String(row.pay_type),
          cost_type: String(row.cost_type),
          status: String(row.status),
          is_show: String(row.is_show),
          yue: String(row.yue),
         } };
      },
      handleAdd() {
        this.title = '添加任务';
        this.dialogVisible = true;
        this.key = Math.random();
        this.ruleForm = {
          name: '',
          type: '',
          older_type: '',
          is_show: '1',
          yue: '1',
          cost_type: '1',
          pay_type: '1',
          status: '1',
          msg: ''
        };
      },
      cancelOrder(row) {
        this.$confirm("确定删除该条数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            APITask.taskDelete({ id: row.id }).then((resp) => {
              if (resp.code === 200) {
                this.$message({ type: "success", message: "删除成功!"});
                this.fetchTableList();
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消操作",
            });
          });
      },
    },
  };
</script>
<style lang="scss" scoped>
  .index-container {
    box-sizing: border-box;
    width: 100%;
    padding: 0 30px !important;
    margin: 0 !important;
    background: #fff !important;

    .main-header {
      padding-top: 4px;
      margin-bottom: 24px;

      .search {
        display: inline-block;

        .search-title {
          flex: 0 0 48px;
          width: 48px;
          font-size: 16px;
          line-height: 36px;
          color: #333;
        }
      }

      .search > div {
        display: inline-block;
        margin-left: 20px;
      }
    }
    .task-icon-img{
      width: 80px;
      height: 80px;
    }
  }

  .form-footer {
    padding-left: 100px;
  }

  .dialog-main {
    .table-do {
      margin-bottom: 15px;
    }

    ::v-deep {
      th {
        .cell {
          color: #fff;
        }
      }
    }
  }
  .task-list-img{
    width: 40px;
    height: 40px;
  }
</style>
